<template>
  <view style="display: flex; flex-direction: column">
    <van-tabs active="1" swipeable color="#66ccff" @change="refresh">
      <van-tab title="我的日记" name="1">
        <view
          style="display: flex; flex-direction: column; align-items: center"
        >
          <!-- <div class="card-items"></div>
      <div class="card-items"></div>
      <div class="card-items"></div> -->
          <day
            :date="defaultDate.getDate()"
            :month="defaultDate.getMonth() + 1"
            :year="defaultDate.getFullYear()"
            @click.native="gotoFill(defaultDate.getTime())"
            :hasDiary="hasTodayDiary"
            :title="todayDiaryTitle"
            :imgList="todayImgs"
          ></day>
          <day
            :date="yesDate.getDate()"
            :month="yesDate.getMonth() + 1"
            :year="yesDate.getFullYear()"
            @click.native="gotoFill(yesDate.getTime())"
            :hasDiary="hasYesterdayDiary"
            :title="yesterdayDiaryTitle"
            :imgList="yesterdayImgs"
          ></day>
        </view>
      </van-tab>

      <van-tab title="个人空间" name="2">
        <view
          style="display: flex; flex-direction: column; align-items: center"
        >
          <div
            class="card-items"
            style="display: flex; flex-direction: column; margin-bottom: 10rpx"
          >
            <div style="margin: 10rpx; display: flex; flex-direction: column">
              <div style="font-weight: bold; margin: 20rpx">
                本月共{{ dateList.length }}个日记
              </div>
              <view>
                <van-calendar
                  ref="cal"
                  readonly
                  @select="select"
                  @unselect="unselect"
                  row-height="40"
                  color="#66ccff"
                  type="multiple"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :default-date="dateList"
                  :show-title="false"
                  :show-subtitle="false"
                  style="height: 550rpx"
                  :poppable="false"
                  :show-confirm="false"
                  class="calendar"
                />
              </view>
            </div>

            <div style="margin: 20rpx"></div>
          </div>
          <album :imgList="albumList" :num="albumNum" @click.native="gotoAlbum">
          </album>
        </view>
      </van-tab>
    </van-tabs>
  </view>
</template>   
<script>
import Day from "./components/day";
import Album from "./components/album";
const initialMinDate = (() => {
  const now = new Date(new Date().getTime());
  return new Date(now.getFullYear(), now.getMonth()).getTime();
})();
const initialMaxDate = (() => {
  const now = new Date(new Date().getTime());
  return new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
})();
// 得到当前的日期
const getNowDate = (() => {
  const now = new Date(new Date().getTime());
  console.log(now.getTime());
  return new Date(now.getFullYear(), now.getMonth(), now.getDate());
})();
export default {
  data() {
    return {
      defaultDate: getNowDate, //今天的日期
      yesDate: new Date(getNowDate.getTime() - 24 * 60 * 60 * 1000),
      active: 0,
      show: false,
      activeKey: 0,
      value: "",
      todayDiaryTitle: "",
      yesterdayDiaryTitle: "",
      todayImgs: [],
      yesterdayImgs: [],
      todayDiary: "",
      yesterdayDiary: "",
      hasTodayDiary: false,
      hasYesterdayDiary: false,
      minDate: initialMinDate,
      maxDate: initialMaxDate,

      dateList: [],
      albumList: [],
      albumNum: 0,
    };
  },
  methods: {
    unselect(e) {
      uni.navigateTo({
        url:
          "fillDiary?obj=" +
          encodeURIComponent(JSON.stringify(e.detail.getTime())),
      });
      this.refresh()
    },
    select(e) {
      uni.navigateTo({
        url:
          "fillDiary?obj=" +
          encodeURIComponent(JSON.stringify(e.detail[e.detail.length-1].getTime())),
      });
      this.refresh()
    },

    // formatter(day) {
    //   if (this.dateList.indexOf(day.date.getTime()) != -1) {
    //     day.type = "disabled";
    //     return day;
    //   }
    // },

    onClose(e) {
      this.show = false;
    },

    popInfo(e) {
      this.show = true;
    },

    gotoFill(e) {
      uni.navigateTo({
        url: "fillDiary?obj=" +
          encodeURIComponent(JSON.stringify(e)),
      });
    },
    gotoAlbum() {
      uni.navigateTo({
        url: "showAlbum",
      });
    },
    findDiary() {
      this.sjhrequest
        .run("findDiary", {
          d_date: this.defaultDate.getTime(),
        })
        .then((res) => {
          // console.log(res);
          if (res.result.length != 0) {
            this.todayDiaryTitle = res.result[0].d_title;
            this.hasTodayDiary = true;
          }
        })
        .catch((err) => {
          // 处理异常
          console.error(err);
        });
      this.sjhrequest
        .run("findDiary", {
          d_date: this.yesDate.getTime(),
        })
        .then((res) => {
          if (res.result.length != 0) {
            this.yesterdayDiaryTitle = res.result[0].d_title;
            this.hasYesterdayDiary = true;
          }
        })
        .catch((err) => {
          // 处理异常
          console.error(err);
        });
    },
    findDiaryImg() {
      this.sjhrequest
        .run("findDiaryImg", {
          d_date: this.defaultDate.getTime(),
        })
        .then((res) => {
          // 如果已经有图片，则填入
          // console.log(res);
          if (typeof res.result != "undefined" && res.result.length != 0) {
            for (let i in res.result) {
              // console.log(res.result[i].img_url);
              this.todayImgs.push(res.result[i].img_url);
            }
          }
          // 处理结果
        })
        .catch((err) => {
          // 处理异常
          console.error(err);
        });
      this.sjhrequest
        .run("findDiaryImg", {
          d_date: this.yesDate.getTime(),
        })
        .then((res) => {
          // 如果已经有图片，则填入
          // console.log(res);
          if (typeof res.result != "undefined" && res.result.length != 0) {
            for (let i in res.result) {
              // console.log(res.result[i].img_url);
              this.yesterdayImgs.push(res.result[i].img_url);
            }
          }
          // 处理结果
        })
        .catch((err) => {
          // 处理异常
          console.error(err);
        });
    },
    getDiary() {
      this.sjhrequest
        .run("getDiary", {})
        .then((res) => {
          for (let i in res.dateList) {
            this.dateList.push(res.dateList[i].d_date);
          }
        })
        .catch((err) => {
          // 处理异常
          console.error(err);
        });
    },

    findAlbum() {
      this.sjhrequest
        .run("findDiaryImgByUser", {})
        .then((res) => {
          this.albumNum = res.imgList.length;
          if (this.albumNum > 6) this.albumList = res.imgList.slice(0, 6);
          else this.albumList = res.imgList;
        })
        .catch((err) => {
          // 处理异常
          console.error(err);
        });
    },
    refresh() {
      this.todayDiaryTitle = "";
      this.yesterdayDiaryTitle = "";
      this.todayImgs = [];
      this.yesterdayImgs = [];
      this.todayDiary = "";
      this.yesterdayDiary = "";
      this.hasTodayDiary = false;
      this.hasYesterdayDiary = false;
      this.dateList = [];
      this.findDiary();
      this.findDiaryImg();
      this.getDiary();
      this.findAlbum();
    },
  },
  onShow(){
      this.refresh();
  },
  onPullDownRefresh() {
    //刷新后的效果
    setTimeout(() => {
      this.refresh();
      uni.stopPullDownRefresh();
    }, 2000);
  },

  components: {
    Day,
    Album,
  },
};
</script> 
<style scoped>
.card-items {
  width: 730rpx;
  background-color: white;

  margin-top: 10rpx;
  border-radius: 20rpx;
}
</style>